Redesign JetTheme - Menambahkan Syntax Highlighter

Syntax Highlighter merupakan fitur penyunting teks yang digunakan dalam bahasa pemrograman, skrip, atau bahasa markah seperti HTML, CSS, dan JavaScript. Fitur tersebut akan menampilkan skrip berwarna dalam format teks dan disertai dengan font yang telah ditentukan.

Ide penggunaan sintaksis sendiri pertama kali digunakan oleh Wilfred Hansen dalam penyunting teks Emily pada tahun 1969. Penyunting teks Emily menyediakan kemudahan untuk melakukan pelengkapan kode bahasa independen tingkat lanjut secara otomatis.

Berikut contoh Tag </kbd> dan yang dibawah adalah contoh Syntax Highlighter pada template Viomagz Redesign Blog Buttatoa.

/* gridmode */
.menu-gridmode {position:relative;}
.gridmode-switch .switch-title{color:#4169E1}
.gridmode-switch .slider{border:2px solid #4169E1}
.gridmode-switch .slider:before{background:#4169E1}
.gridmode-switch{position:absolute;top:0;right:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0}
.gridmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:7px;text-transform:uppercase}
.gridmode-switch .switch-title:before{content:"List Mode"}
.gridmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.gridmode-switch .switch input{opacity:0;width:0;height:0}
.gridmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.gridmode-switch .slider:before{position:absolute;content:"";border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.gridmode-switch input:checked+.slider{background-color:#97230a;border:2px solid #4169E1}
.gridmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}
body.gridmode .gridmode-switch .switch-title:before{content:"Grid Mode"}
body.gridmode .post-outer {width: calc(50% - 10px);float:left;margin: 0 5px 10px 0px;}
body.gridmode .post {margin-bottom: 10px;height: 400px;}
body.gridmode .img-thumbnail-wrap{width: 95%!important;margin-bottom: 10px;margin-right: 15px}
body.gridmode h2.post-title {text-align:left;margin-left:0}
body.gridmode #blog-pager{padding:40px 0}
@media screen and (max-width: 480px){
.post-snippet{margin-left: 0;margin-right: 0}
body.gridmode .post-outer{width:100%}
body.gridmode .post{height:auto}
body.gridmode .img-thumbnail-wrap{width: 100%!important;margin:0 0 5px 0}
}

Copy script dibawah dan pastekan di bagian atas atau sebelum </body>

<b:if cond='data:view.isError'><style>
#main, #header, #sidebar, #footer, .blogbutttoaToTop {display:none}
body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh}
body {background:var(--jt-bg-light); color:#1d2129}
#blogbuttatoa404 {background:hsl(210, 11%, 15%); text-align:center; margin:auto; font-weight:700; font-size:45px; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;}
#blogbuttatoa404 #error-text {position:relative; font-size:40px; color:#FF8C00; top:50%; right:50%; transform:translate(50%,-50%);}
#blogbuttatoa404 #error-text a {color:#888; text-decoration:none}
#blogbuttatoa404 #error-text p {margin:0!important; letter-spacing:.5px;padding:20px}
#blogbuttatoa404 #error-text span {color:#008c5f;font-size:100px;}
#blogbuttatoa404 #error-text a.back {background:#008c5f;color:#00008B;padding:10px 20px;font-size:20px;border-radius:50px;border:double #fff;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
#blogbuttatoa404 #error-text a.back:hover {background:#444;color:#fff;border:double #eceeee;}
#blogbuttatoa404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;}
#blogbuttatoa404 #error-text #copyright {font-size:16px;position:inherit;top:150px}
#blogbuttatoa404 #error-text #copyright a {color:#008c5f}
@media only screen and (max-width:640px){
#blogbuttatoa404 #error-text {font-size:20px;}
#blogbuttatoa404 #error-text span {font-size:60px;}
#blogbuttatoa404 #error-text a.back {padding:5px 10px;font-size:15px;}
#blogbuttatoa404 #error-text a.back:hover, #blogbuttatoa404 #error-text a.back:active {border:0;}}
</style></b:if> 

Semoga bermanfaat, Wassalam.